<!-- 查看视频组件 -->
<template>
	<!-- 视频开始 -->
	<view class="photo-list" style="background: #fff;" v-if="videoList.length > 0">
		<view class="dis-localtion" v-if="showTitle">
			<text class="lo-text">病害视频</text>
		</view>
		<u-upload  accept="video" :disabled="true"  multiple  :customStyle="{marginLeft:'30rpx',marginTop:'20rpx'}"  class="video-class">
			<view class="no-wrap" style="display: flex;flex-wrap: wrap;" v-show="videoList.length > 0">
				<view v-for="(item, index) in videoList" :key="index" class="item-box">
					<view
						style="background: #f4f5f7; width: 80px; height: 80px; border-radius: 2px; margin: 0 8px 8px 0; overflow: hidden; position: relative;">
						<view @click.stop="handleClickPreview(item)"
							style="background: #f4f5f7; width: 80px; height: 80px; border-radius: 2px; margin: 0 8px 8px 0; display: flex; justify-content: center; align-items: center; flex-direction: column;">
							<u-icon name="play-right-fill" color="#80cbf9" size="26"></u-icon>
							<text style="color: #9d9ea0;font-size: 13px;">视频</text>
						</view>
					</view>
				</view>
				<view v-if="videoList < 9"
					style="background: #f4f5f7; width: 80px; height: 80px; border-radius: 2px; margin: 0 8px 8px 0;">
					<view style="display: flex; justify-content: center; align-items: center; height: 100%;">
					</view>
				</view>
			</view>
		</u-upload>
	
		<!-- 视频预览 -->
		<view v-if="playVideoSrc" @click="closedVideo"
			style="width: 100vw; height: 100vh; background: #2c2c2c; position: fixed; top: 0; left: 0; z-index: 100;">
				<video @click.stop :src="playVideoSrc" controls :show-fullscreen-btn="false" @error="handlerError"
					style="position: absolute; top: 50%; width: 100%; height: 80%; transform: translateY(-50%);"></video>
		</view>
	</view>
	<!-- 视频结束 -->
</template>

<script>
	export default {
		props: {
			showTitle:{
				type: Boolean,
				default: true
			},
			videoList: {
				type: Array,
				default: ()=>{return []}
			},
			playVideoSrc: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
			}
		},
		methods: {
			/**获取对象url查看视频
			 * @param {Object} item 
			 */
			handleClickPreview(item) {
				// this.playVideoSrc = item.url;
				this.$emit('lookVideo',item.url)
			},
			closedVideo(){
				this.$emit('closedVideo')
			},
			handlerError(e){
				console.error(e, 'error');
			}
		},
	}
</script>

<style lang="scss" scoped>
	.dis-localtion {
		background-color: white;
		margin: 20rpx 0;
		
		.lo-text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			display: inline-block;
			font-size: 32rpx;
			margin-left: 30rpx;
			// padding-top: 16rpx;
			height: 100rpx;
			width: 90%;
			line-height: 100rpx;
			border-bottom: 1rpx solid #e6e9f0;
		}
	}
.video-class /deep/ .u-upload__wrap {
		flex-direction: column;
}
</style>